import { Navigate , useRoutes } from "react-router-dom"

import { lazy , Suspense} from "react" //懒加载

import Loading from '../components/Loading' //等待页面路由

const Login = lazy(() => import('../pages/Login'))
const Main = lazy(() => import('../pages/Main'))
const NotFound = lazy(() => import("../components/NotFound"))
const Home = lazy(() => import('../pages/Main/Home'))
const About = lazy(() => import('../pages/Main/About'))
const List = lazy(() => import("../components/List"))


//封装函数传懒加载组件
const load = (Comp) => {
    return (
        <Suspense fallback={<Loading/>}>
            <Comp />
        </Suspense>
    )
}

export const routes = [
    {
        path: "/login",
        element: load(Login)
    },
    {
        path: "/main",
        element: load(Main),
        children: [
            {
                path: "/main/home",
                element: load(Home),
                children: [
                    {
                        path: "/main/home/music/:id",
                        element: load(List),
                    },
                    {
                        path: "/main/home/news/:id",
                        element: load(List),
                    }
                ]
            },
            {
                path: "/main/about",
                element: load(About)
            }
        ]
    },
    {
        path: "/",
        element: <Navigate to='/login'/>
    },
    {
        path: "*",
        element: <NotFound/>
    },
]

export const GetRoutes = () => {
    return useRoutes(routes)
} 